<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左右布局示例</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif; /* 设置字体 */
  }

  #container {
    display: flex;
    flex-direction: row; /* 设置布局为横向排布 */
    height: 100%;
  }

  #left-nav {
    width: 200px; /* 左侧导航栏宽度 */
    background-color: #3af40c; /* 背景颜色 */
    color: rgb(8, 56, 247); /* 文字颜色 */
    padding: 10px; /* 内边距 */
  }

  #right-content {
    flex: 1; /* 右侧内容占据剩余空间 */
    background-color: #f80a91; /* 背景颜色 */
    padding: 20px; /* 内边距 */
  }
</style>
</head>
<body>

<div id="container">
  <div id="left-nav">左侧导航栏</div>
  <div id="right-content">右侧内容区域</div>
</div>

</body>
</html>
